<template>
  <div class="markDialogC">
    <div class="markDialogC-close" @click="closeView()"></div>
    <div class="markDialogC-top"></div>
    <div class="markDialogC-contentC">
      <div class="markDialogC-contentC-title">
        <div class="markDialogC-contentC-title-itemC">
          <span>标记</span>
          <div class="markDialogC-contentC-title-itemC-line" />
        </div>
      </div>
      <div class="areaDialogC-contentC-line"></div>
      <div class="markDialogC-contentC-inputC-item">
        <div class="markDialogC-contentC-inputC-item-name">名称：</div>
        <input class="markDialogC-contentC-inputC-item-input" v-model="model.name" />
      </div>
      <div class="divider">
        样式设置
      </div>
      <div class="markDialogC-contentC-inputC-item" style="align-items: start">
        <div class="markDialogC-contentC-inputC-item-name">符号集合：</div>
        <LocationIconPicker v-model="model.symbolSet"  />
      </div>

      <div class="markDialogC-contentC-inputC-item">
        <div class="markDialogC-contentC-inputC-item-name">符号颜色：</div>
        <el-color-picker v-model="model.color" color-format="rgb" />
      </div>
      <div class="markDialogC-contentC-btnC">
        <!--        <span >删除</span>-->
        <span @click="saveMarkPoint()">确认</span>
        <span @click="clearPoint()">清除</span>
      </div>
    </div>

  </div>
</template>
<script>
import { delMark, getMarkPointItem, saveMark } from '@/api/area';
import LocationIconPicker from '@/components/LocationIconPicker';
import {
  sendToUeMsg,
  sendPointInfoMsg,
  sendStartPointMsg
} from "@/utils/UeMessageUtils";

export default {
  name: 'mark-form',
  data() {
    return {
      model: {
        id: '',
        color: '',
        name: '',
        remake: '',
        symbolSet: '',
      },
      pointInfo: {
        latitude: '',
        longitude: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '名称不能为空',
          },
        ],
        // remake: [
        //   {
        //     required: true,
        //     message: '备注不能为空',
        //   },
        // ],
      },
    };
  },
  methods: {

    //清除标点
    async clearPoint() {
      if (this.model.id) {
        const res = await delMark(this.model.id);
        console.log(res)
        sendToUeMsg({
          id: this.model.id,
          eventType: 'removepoint'
        })
      }

      this.closeView();
    },
    //标记点位
    async saveMarkPoint() {
      //如果未在录制漫游中
      if (this.model.name == '') {
        this.$message.error('请输入名称')
        return
      }
      if (this.model.symbolSet == '') {
        this.$message.error('请选择符号样式')
        return
      }
      if (this.model.color == '') {
        this.$message.error('请选择颜色')
        return
      }

      if (!this.pointInfo.latitude) {
        this.$message.error('请在地图中 “按7” 标记要生成标点的位置')
        return
      }


      const res = await saveMark({
        ...this.pointInfo,
        ...this.model,
      }).catch(err => err);
      console.log('保存标点', res.data)
      if (res.data) {
        let id = res.data.data.id || this.model.id;
        console.log('id====', id)
        // 清除临时标点
        sendStartPointMsg(0)
        let [r, g, b] = this.model.color.substring(4, this.model.color.length - 1).split(',');
        const msg = {
          eventType: 'addpoint',
          ...this.model,
          ...this.pointInfo,
          id: id,
          r, g, b
        }
        sendToUeMsg(msg)
        this.closeView();
      }
    },
    //关闭界面
    closeView() {
      // this.restData()
      // sendAreaDeviceMsg(0)
      this.$emit('close')
    },
    onSave() {
      this.$refs.form.validate(async (isValid) => {
        if (isValid) {
          this.$emit('save', {
            ...this.model,
            type: 1,
          });
        }
      })
    },
    onDelete() {
      this.$emit('delete');
    },
    update(data) {
      this.model.areaName = data.areaName;
      this.model.remake = data.remake;
      this.model.symbol = data.symbol;
      this.model.symbolSize = data.symbolSize;
      this.model.whetherName = data.whetherName;
    },
  },
  mounted() {
    this.pointInfo.latitude = ''
    this.pointInfo.longitude = ''
    this.$event.on('msg::clickPoint', (point) => {
      console.log('接受点击点位消息', point)
      getMarkPointItem(point).then(res => {
        console.log('接受点击点位消息 res', res)
        if (res.data) {
          const pInfo = res.data.data || {};
          this.model.id = pInfo.id;
          this.model.name = pInfo.name;
          this.model.color = pInfo.color;
          this.model.symbolSet = pInfo.symbolSet;
          this.model.remake = pInfo.remake;
          this.pointInfo.latitude = pInfo.latitude
          this.pointInfo.longitude = pInfo.longitude
        }
        console.log('this.model', this.model)
      })
      // try {
      //   const [ longitude, latitude, height] = point.split(',')
      //   this.pointInfo.latitude = latitude
      //   this.pointInfo.longitude = longitude
      //   console.log('接受点位消息', this.pointInfo)
      // } catch (error) {
      //   console.log('err', error)
      // }
    });
    //接受点位消息，
    this.$event.on('msg::markPoint', (point) => {
      console.log('接受点位消息', point)
      try {
        const [longitude, latitude, height] = point.split(',')
        this.pointInfo.latitude = latitude
        this.pointInfo.longitude = longitude
        this.model.remake = height
        console.log('接受点位消息', this.pointInfo)
      } catch (error) {
        console.log('err', error)
      }
    });
    sendStartPointMsg(1)
  },
  beforeDestroy() {
    sendStartPointMsg(0)
  },
  watch: {
    dataSource(val) {
      this.update(val);
    }
  },
  props: {
    dataSource: {
      type: Object,
      default: () => ({
        areaName: '',
        remake: '',
        symbol: 'default',
        symbolSize: 2,
        whetherName: 1,
      }),
    },
  },
  components: {
    LocationIconPicker
  },
}
</script>
<style lang="scss" scoped>
.markDialogC {
  position: absolute;
  right: 20px;
  z-index: 99;
  top: 40%;
  width: 411px;
  height: 250px;
  display: flex;
  flex-direction: column;

  &-close {
    background-size: 100% 100%;
    background-image: url("@/assets/icon_close.png");
    width: 14px;
    height: 14px;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 100;
    cursor: pointer;

    &:hover {
      opacity: 0.7;
    }
  }


  &-top {
    width: 80px;
    height: 10px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_dialog_part.png");
  }

  &-contentC {
    width: 100%;
    height: 600px;
    display: flex;
    position: relative;
    flex-direction: column;
    background: rgba(8, 32, 72, 0.71);
    opacity: 1;

    &-title {
      display: flex;
      flex-direction: row;

      &-itemC {
        cursor: pointer;
        display: flex;
        margin: 5px 16px 0px 16px;
        flex-direction: column;

        &:hover {
          opacity: 0.8;
        }

        span {
          display: block;
          height: 25px;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 25px;
        }

        &-line {
          height: 2px;
          background: #FFFFFF;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
        }
      }
    }

    &-line {
      width: 100%;
      height: 1px;
      opacity: 1;
      background: rgba(98, 183, 255, 0.2);
    }

    &-inputC {
      display: flex;
      margin-left: 16px;
      flex-direction: column;
      width: 375px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      margin-top: 16px;

      &-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-height: 47px;

        &-name {
          padding: 0px 20px;
          white-space: nowrap;
          height: 47px;
          align-items: center;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
          line-height: 47px;
        }

        &-input {
          background-color: transparent;
          height: 32px;
          width: 100%;
          text-align: center;
          border: 0px solid rgba(98, 183, 255, 0.2);
          border: 1px solid rgba(98, 183, 255, 0.2);
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 32px;
        }
      }
    }

    &-btnC {
      margin: 20px 0px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;

      span {
        cursor: pointer;
        display: block;
        width: 86px;
        height: 36px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        text-align: center;
        font-size: 12px;
        font-family: PingFang HK-Regular, PingFang HK;
        font-weight: 400;
        color: #FFFFFF;
        margin: 0px 16px;
        line-height: 36px;

        &:hover {
          opacity: 0.8;
        }
      }

      :nth-child(1) {
        background: rgba(221, 248, 255, 0.5);
      }

      :nth-child(2) {
        background: rgba(0, 230, 255, 0.7);
      }
    }


  }


}

.divider {
  height: 32px;
  margin-left: 20px;
  background: rgba(98, 183, 255, 0.2);
  opacity: 1;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 32px;
  box-sizing: border-box;
  margin-bottom: 1.14583vw;

  &:before {
    content: "";
    width: 2px;
    height: 100%;
    display: inline-block;
    background: #62B7FF;
    vertical-align: top;
    margin-right: 12px;
  }
}

.size-width {
  &--small {
    width: 120px;
  }
}
</style>